import React from "react";
import { Popover, Input } from "@arco-design/web-react";
import { ChromePicker } from "react-color";

const ColorPicker = props => {
	// const { value } = props;
	console.log(props.onChange);
	const value = props.value || {};

	const onChangeComplete = value => {
		// setColor(value.hex);
		console.log(props);
		// props.onChange(value.hex);
		// props.onChange && props.onChange(value);
	};

	const handleChange = newValue => {
		console.log(newValue);
		// props.onChange && props.onChange(newValue);
	};

	return (
		<Popover
			trigger="click"
			getPopupContainer={() => document.querySelector(".property-tabs")}
			content={<ChromePicker color={value} onChangeComplete={onChangeComplete} />}
			style={{
				padding: 0
			}}>
			<Input
				onChange={v => {
					// handleChange({ ...value, input: v });
					console.log(v);
				}}
				readOnly
				style={{ width: 125 }}
				addonafter={<div style={{ width: 15, height: 15, backgroundColor: value, border: "1px solid #6a7b97" }}></div>}
			/>
		</Popover>
	);
};

export default ColorPicker;
